<template>
    <el-card v-if="props.blogPreview" style="width: 480px">
        <template #header>
            <RouterElLink :underline="false" :to="`/blog/${blogPreviewData.id}`">
                {{ blogPreviewData.title }}
            </RouterElLink>
        </template>
        <el-container>
            <el-aside style="width: 40px;">
                <RouterElLink :underline="false" :to="`/blog/${blogPreviewData.id}`">
                    <el-avatar shape="square" :size="30" :src="getImageUrl(blogPreviewData.authorAvatar)" />
                </RouterElLink>
            </el-aside>
            <el-main>
                <div class="blog-content-preview">
                    {{ blogPreviewData.summary }}
                </div>
            </el-main>
        </el-container>
        <template #footer>
            <RouterElLink :underline="false" type="primary" :to="`/userSpace/${blogPreviewData.authorId}`">{{
                blogPreviewData.authorName }}</RouterElLink>
            <el-text class="mx-1" type="primary">{{ blogPreviewData.createdAt }}</el-text>
        </template>
    </el-card>
</template>

<script setup lang="ts">
import { defaultBlogPreview } from '@/defaults/blogDefault';
import { BlogPreview } from '@/types/blogType';
import { computed, PropType } from 'vue';
import RouterElLink from '../RouterElLink.vue';
import { getImageUrl } from '@/utils/mediaUtils';

const props = defineProps({
    blogPreview: {
        type: Object as PropType<BlogPreview>,
        required: true
    },
})

const blogPreviewData = computed(() => {
    return { ...defaultBlogPreview, ...props.blogPreview };
})
</script>

<style scoped>
.blog-content-preview {
    background-color: rgb(241, 241, 241);
}

.el-card :deep(.el-card__header) {
    padding: 5px;
}

.el-card :deep(.el-card__body) {
    padding: 5px;
}

.el-card :deep(.el-card__footer) {
    padding: 5px;
    height: 30px;
}

.el-container :deep(.el-main) {
    padding: 0;
}
</style>